﻿<template>
  <view class="tab-station">
    <view class="content-container">
      <view v-if="loading" class="loading-container">
        <text class="loading-text">加载中...</text>
      </view>
      
      <view v-else-if="error" class="error-container">
        <text class="error-text">{{ error }}</text>
        <view class="retry-btn" @tap="loadData">
          <text>重试</text>
        </view>
      </view>
      
      <view v-else-if="dataList.length === 0" class="empty-container">
        <text class="empty-text">暂无驿站信息</text>
      </view>
      
      <view v-else>
        <view 
          class="station-item" 
          v-for="(item, index) in dataList" 
          :key="index"
          @tap="onItemClick(item)"
        >
          <view class="station-image">
            <image 
              v-if="item.image || item.cover" 
              :src="item.image || item.cover" 
              mode="aspectFill"
              class="real-image"
            />
            <view v-else class="placeholder-image">
              <text class="placeholder-emoji">🏪</text>
            </view>
            <view class="status-badge" :class="{ open: item.isOpen !== false }">
              <text class="status-text">{{ item.isOpen === false ? '暂停营业' : '正在营业' }}</text>
            </view>
          </view>
          <view class="station-info">
            <text class="station-title">{{ item.title || item.name || '川北驿站' }}</text>
            <text class="station-location" v-if="item.address">
              📍 {{ item.address }}
            </text>
            <text class="station-desc">{{ item.description }}</text>
            <view class="station-details" v-if="item.contact || item.telephone || item.remark">
              <text class="detail-item" v-if="item.contact">👤 {{ item.contact }}</text>
              <text class="detail-item" v-if="item.telephone">📞 {{ item.telephone }}</text>
              <text class="detail-item" v-if="item.remark">💡 {{ item.remark }}</text>
            </view>
            <view class="station-services" v-if="item.services && item.services.length">
              <text 
                class="service-tag" 
                v-for="(service, idx) in item.services.slice(0, 3)" 
                :key="idx"
              >
                {{ service }}
              </text>
            </view>
            <view class="station-footer">
              <text class="open-time" v-if="item.openTime">营业时间：{{ item.openTime }}</text>
              <view class="nav-btn">
                <text>📍 导航</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import sheep from '@/sheep';

const loading = ref(false);
const error = ref('');
const dataList = ref([]);

const loadData = async () => {
  try {
    loading.value = true;
    error.value = '';
    
    const city = await sheep.$helper.getCurrentCity();
    const res = await sheep.$api.noAuth.getHomeContentByType('6', city);
    
    if (res && res.content && Array.isArray(res.content)) {
      dataList.value = res.content
        .filter(item => item.state === 1)
        .map(item => ({
          id: item.id,
          title: item.name,
          name: item.name,
          description: item.content ? item.content.replace(/<[^>]*>/g, '').substring(0, 50) + '...' : item.remark || '川北驿站',
          content: item.content,
          image: getImageUrl(item.pic),
          cover: getImageUrl(item.pic),
          url: item.url || null,
          location: item.address,
          address: `${item.province || ''}${item.city || ''}${item.district || ''}${item.address || ''}`,
          openTime: item.openTime || '营业时间待定',
          isOpen: item.state === 1,
          services: item.services || [],
          contact: item.contact,
          telephone: item.telephone,
          managerId: item.managerId,
          remark: item.remark,
          sort: item.sort
        }));
    } else {
      dataList.value = [];
    }
  } catch (err) {
    error.value = '加载失败，请稍后重试';
    dataList.value = [];
  } finally {
    loading.value = false;
  }
};

const getImageUrl = (pic) => {
  if (!pic || pic === 'null' || pic === '') return null;
  
  const imagePath = pic.trim();
  if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
    return imagePath;
  }
  
  const baseUrl = sheep.$platform.baseUrl || '';
  return baseUrl + (imagePath.startsWith('/') ? imagePath : '/' + imagePath);
};

const onItemClick = (item) => {
  if (item.url) {
    sheep.$router.go(item.url);
  } else if (item.id) {
    uni.navigateTo({
      url: `/pages/station-detail?id=${item.id}`
    });
  }
};

onMounted(() => {
  loadData();
});

defineExpose({
  loadData
});
</script>

<style lang="scss" scoped>
$primary-color: #8B4513;
$secondary-color: #DAA520;
$accent-color: #228B22;
$text-dark: #333;
$text-light: #666;

.tab-station {
  min-height: 100vh;
  background: #fff;
  padding: 20rpx;

  .loading-container,
  .error-container,
  .empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400rpx;
    
    .loading-text,
    .error-text,
    .empty-text {
      font-size: 28rpx;
      color: $text-light;
      margin-bottom: 20rpx;
    }
    
    .retry-btn {
      padding: 16rpx 32rpx;
      background: $primary-color;
      color: white;
      border-radius: 24rpx;
      font-size: 26rpx;
    }
  }

  .station-item {
    background: white;
    border-radius: 16rpx;
    padding: 0;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
    overflow: hidden;
    
    .station-image {
      position: relative;
      width: 100%;
      height: 300rpx;
      
      .real-image {
        width: 100%;
        height: 100%;
      }
      
      .placeholder-image {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        
        .placeholder-emoji {
          font-size: 60rpx;
        }
      }
      
      .status-badge {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        
        &.open {
          background: $accent-color;
        }
        
        &:not(.open) {
          background: #ff6b6b;
        }
        
        .status-text {
          font-size: 24rpx;
          font-weight: bold;
          color: white;
        }
      }
    }
    
    .station-info {
      padding: 30rpx;
      
      .station-title {
        display: block;
        font-size: 32rpx;
        font-weight: bold;
        color: $text-dark;
        margin-bottom: 10rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .station-location {
        display: block;
        font-size: 24rpx;
        color: $text-light;
        margin-bottom: 10rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .station-desc {
        display: block;
        font-size: 26rpx;
        color: $text-light;
        margin-bottom: 15rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
      }
      
      .station-details {
        display: flex;
        gap: 20rpx;
        margin-bottom: 15rpx;
        flex-wrap: wrap;
        
        .detail-item {
          font-size: 24rpx;
          color: $text-light;
          background: #f5f5f5;
          padding: 8rpx 12rpx;
          border-radius: 12rpx;
        }
      }
      
      .station-services {
        display: flex;
        gap: 10rpx;
        margin-bottom: 20rpx;
        flex-wrap: wrap;
        
        .service-tag {
          padding: 8rpx 16rpx;
          background: #f0f0f0;
          border-radius: 15rpx;
          font-size: 22rpx;
          color: $text-dark;
        }
      }
      
      .station-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .open-time {
          font-size: 24rpx;
          color: $text-light;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-right: 20rpx;
        }
        
        .nav-btn {
          padding: 12rpx 24rpx;
          background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
          color: white;
          border-radius: 20rpx;
          font-size: 24rpx;
        }
      }
    }
  }
}
</style> 
